<template>
	<div class="page-wrapper">
		<el-table v-loading="state.dataListLoading" :data="dataList" border style="width: 100%" width="100%" height="100%">
            <!-- @selection-change="selectionChangeHandle"  -->
			<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
			<!-- <el-table-column prop="created_at" label="创建时间" header-align="center" align="center" width="180"></el-table-column> -->
			<el-table-column prop="name" label="产品名称" header-align="center" align="center">
                <template #default="scope">
					<div class="w100 flex flexL flexC">
                        <div class="mr10 flex flexL" v-if="scope.row.images.length">
                            <el-image
                                style="width: 30px; height: 30px;border-radius: 2px;"
                                :src="scope.row.images[0]"
                                preview-teleported
                                :preview-src-list="scope.row.images"
                                :initial-index="0"
                                fit="cover"
                                />
                        </div>
                        <div>{{scope.row.name}}</div>
                    </div>
				</template>
            </el-table-column>
			<el-table-column prop="type.name" label="产品类型" header-align="center" align="center"></el-table-column>
			<el-table-column prop="attr" label="产品属性" header-align="center" align="center">
                <template #default="scope">
					<span>{{scope.row.attr_name_fill}}-{{scope.row.attr_name}}</span>
				</template>
            </el-table-column>
			<el-table-column prop="inventory" label="库存数量" header-align="center" align="center"></el-table-column>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.per_page"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</div>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, computed } from 'vue'
import { IHooksOptions } from '@/hooks/interface'

const state: IHooksOptions = reactive({
	dataListUrl: '/api/strator/product/warning',
})
const dataList = computed(() => {
    return state.dataList.map(item => {
        return {
            ...item,
            images: item.images&&item.images!='[]'?item.images.split(','):[]
        }
    })
})

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteHandle } = useCrud(state)
</script>
